* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    height: 100vh;
    background-image: linear-gradient(135deg, #1d1c1f 10%, #14081d 100%);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body,.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.container {
    width: 400px;
    max-width: 100%;
    flex-wrap: wrap;
}
.container > .square {
    background: linear-gradient(135deg, #1d064e 10%, #10031a 100%);
    margin: 2px;
    width: 16px;
    height: 16px;
    transition: 2s ease;
    box-shadow: 0 0 2px #736a85;
}
.container > .square:hover {
    transition-duration: 0s;
}